<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .mode{
            position: fixed;
            height: 400px;
            width: 300px;
            background-color: white;
            z-index: 100;  /* 数值越大越在上层显示 */
            left: 50%;  /* 按照窗口宽度的50%来移动 */
            top:50%;    /* 按照窗口高度的50%来移动 */
            margin-left: -150px;
            margin-top: -200px;

        }

    </style>
</head>
<body>

<div>
    <h1>
        22期,吴老板唱歌
    </h1>
</div>


<div class="mode">

</div>

<div class="shadow">

</div>


</body>
</html>